<script lang="ts" setup>
import { ref } from "vue";
import { type RouteRecordName, type RouteRecordRaw, useRouter } from "vue-router"
const router = useRouter()
function goto(path: string) {
  router.push({ path })
}
//#region 查
const tableData = ref([
  {
    email: '1',
    email1: '张三',
    email2: '13800138000',
    email3: '10',
    email4: '5',
    email5: '5',
  },
  {
    email: '2',
    email1: '李四',
    email2: '13800138000',
    email3: '9',
    email4: '5',
    email5: '4',
  },
  {
    email: '3',
    email1: '王五',
    email2: '13800138000',
    email3: '9',
    email4: '3',
    email5: '6',
  },
  {
    email: '4',
    email1: '赵六',
    email2: '13800138000',
    email3: '7',
    email4: '5',
    email5: '2',
  },
  {
    email: '5',
    email1: '张三',
    email2: '13800138000',
    email3: '7',
    email4: '3',
    email5: '4',
  },
  {
    email: '6',
    email1: '李四',
    email2: '13800138000',
    email3: '7',
    email4: '6',
    email5: '1',
  },
  {
    email: '7',
    email1: '王五',
    email2: '13800138000',
    email3: '6',
    email4: '2',
    email5: '4',
  }
])
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <div>
        <div class="flex">
          <div class=" w-3/6">
            <h3>在线人员</h3>
            <div class="flex flex-wrap">
              <div class="flex p-1" v-for="(item, index) in 10" :key="index">
                <img src="/touxiang1.svg" class="w-10" alt="" />
                <div>
                  张三<br />
                  13800138000
                </div>
              </div>
            </div>
            <el-divider />
            <div class="flex flex-wrap">
              <div class="flex p-1" v-for="(item, index) in 2" :key="index">
                <div class="text-4xl">
                  <el-icon>
                    <Avatar />
                  </el-icon>
                </div>
                <div>
                  李四<br />
                  13800138000
                </div>
              </div>
            </div>
            <!-- <el-divider /> -->
          </div>
          <div class=" w-3/6 pl-5">
            <h3>任务类型</h3>
            <el-badge :value="12" class="mr-10">
              <el-button size="large" icon="FolderRemove" @click="$router.push('/label-manage/ckd')">出库</el-button>
            </el-badge>
            <el-badge :value="3" class="mr-10">
              <el-button size="large" icon="FolderAdd" @click="$router.push('/label-manage/rkd')">入库</el-button>
            </el-badge>
            <el-button size="large" icon="Folder" @click="$router.push('/warehouse/inventorying')">盘库</el-button>
            <el-button size="large" style="margin-left: 30px" @click="$router.push('/labels/journal')">工作日志</el-button>
            <div>
              <h3>任务未分配</h3>
              <img src="/wfp1.png" class="w-1/2" alt="">
              <!-- <el-tabs tab-position="left" class="Demo-tabs">
                <el-tab-pane label="出库">
                  <div class="table-wrapper">
                    <el-table :data="tableData">
                      <el-table-column type="selection" width="50" align="center" />
                      <el-table-column prop="email" label="序号" align="center" />
                      <el-table-column prop="email1" label="订单编号" align="center" />
                      <el-table-column prop="email2" label="工号" align="center" />
                      <el-table-column label="操作" width="150" align="center">
                        <template #default="scope">
                          <el-button type="primary" text bg size="small">分配</el-button>
                        </template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
<el-tab-pane label="入库">Config</el-tab-pane>
</el-tabs> -->
            </div>
          </div>
        </div>
        <!-- <el-divider /> -->

        <el-divider />
        <div>
          <h3>任务已分配</h3>
          <div>
            <!-- <img src="/renwu1.png" class=" w-full" alt=""> -->
            <el-table :data="tableData">
              <!-- <el-table-column type="selection" width="50" align="center" /> -->
              <el-table-column prop="email" label="序号" align="center" />
              <el-table-column prop="email1" label="姓名" align="center" />
              <el-table-column prop="email2" label="电话" align="center" />
              <el-table-column prop="email3" label="总任务" align="center" />
              <el-table-column label="已完成">
                <template #default="scope">
                  <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row.email4 / scope.row.email3 * 100" status="success">
                    <span>{{ scope.row.email4 }}</span>
                  </el-progress>
                </template>
              </el-table-column>
              <el-table-column label="未完成">
                <template #default="scope">
                  <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row.email5 / scope.row.email3 * 100" status="exception">
                    <span>{{ scope.row.email5 }}</span>
                  </el-progress>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150" align="center">
                <template #default="scope">
                  <el-button type="primary" text bg size="small" @click="goto('/labels/taskDetail')">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped></style>
